

import React from 'react';
import { Link } from 'react-router-dom';
import Layout from '../../components/Layout';

const AboutUsPage: React.FC = () => {
  return (
    <Layout title="关于我们 - 学途">
      <div className="min-h-screen bg-gray-50">
        <div className="max-w-4xl mx-auto px-6 py-8">
          {/* 页面头部 */}
          <div className="mb-8">
            <nav className="text-sm text-gray-600 mb-4">
              <Link to="/home" className="hover:text-blue-600">首页</Link>
              <span className="mx-2">/</span>
              <span className="text-gray-900">关于我们</span>
            </nav>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">关于我们</h1>
            <p className="text-gray-600">了解学途的发展历程、企业文化和团队介绍</p>
          </div>

          {/* 学途简介 */}
          <section className="bg-white rounded-xl shadow-lg p-8 mb-8">
            <div className="flex items-center mb-6">
              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
                <i className="fas fa-rocket text-blue-600 text-xl"></i>
              </div>
              <h2 className="text-2xl font-bold text-gray-900">学途简介</h2>
            </div>
            <div className="space-y-4 text-gray-900">
              <p className="leading-relaxed">
                学途是一家专注于继续教育领域的在线学习平台，致力于为广大学习者提供优质、便捷的教育资源和学习体验。我们秉承"让学习更简单，让教育更公平"的理念，通过先进的技术手段和优质的教学内容，帮助每一位学习者实现个人成长和职业发展目标。
              </p>
              <p className="leading-relaxed">
                自成立以来，学途始终坚持以学习者为中心，不断优化课程质量和平台功能。我们与众多知名高校、培训机构和行业专家建立了紧密合作，打造了涵盖计算机、管理、语言、设计等多个领域的精品课程体系。
              </p>
              <p className="leading-relaxed">
                无论是职场新人希望提升技能，还是职场精英寻求知识更新，学途都能为您提供合适的学习方案。我们相信，通过持续的学习和成长，每个人都能在自己的人生道路上走得更远。
              </p>
            </div>
          </section>

          {/* 联系我们 */}
          <section className="bg-white rounded-xl shadow-lg p-8">
            <div className="flex items-center mb-6">
              <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
                <i className="fas fa-phone text-green-600 text-xl"></i>
              </div>
              <h2 className="text-2xl font-bold text-gray-900">联系我们</h2>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="text-center">
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <i className="fas fa-envelope text-blue-600 text-xl"></i>
                </div>
                <h3 className="font-semibold text-gray-900 mb-2">客服邮箱</h3>
                <p className="text-gray-600 text-sm">support@xuetu.com</p>
              </div>
              <div className="text-center">
                <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <i className="fas fa-phone text-green-600 text-xl"></i>
                </div>
                <h3 className="font-semibold text-gray-900 mb-2">客服电话</h3>
                <p className="text-gray-600 text-sm">400-888-9999</p>
              </div>
              <div className="text-center">
                <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                  <i className="fas fa-clock text-purple-600 text-xl"></i>
                </div>
                <h3 className="font-semibold text-gray-900 mb-2">服务时间</h3>
                <p className="text-gray-600 text-sm">周一至周日 9:00-21:00</p>
              </div>
            </div>
          </section>
        </div>
      </div>
    </Layout>
  );
};

export default AboutUsPage;

